<template>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="page" id="content_SiteContent" style="background: #FFFFFF;padding:16px;padding-top:0px;">
                    <div class="page-content clearfix">
                        <div class="" style="height: 700px;">
                            <div class="page-panel receipts-panel">
                                <!--<h3 class="page-panel-title"> 我的单据
                                    <a class="page-panel-more" style="cursor: pointer"></a>
                                </h3>-->
                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title"><span class="label label-success pull-right">月</span>
                                                <h5>收入</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins">{{data.current_month_income}}</h1>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title"><span class="label label-info pull-right">月</span>
                                                <h5>退款</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins">{{data.current_month_refund}}</h1>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title"><span class="label label-primary pull-right">今天</span>
                                                <h5>订单</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins">{{data.total_order_count}}</h1>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title"><span class="label label-danger pull-right">最近一个月</span>
                                                <h5>用户</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <h1 class="no-margins">{{data.current_month_user_count}}</h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="page-panel form-panel">
                                <h3 class="page-panel-title">
                                    常用功能快捷键
                                    <a class="page-panel-more" style="cursor: pointer"> </a>
                                </h3>
                                <div class="page-panel-cont">
                                    <ul class="apply-list clearfix">
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/customer/customer_list')">
                                                <div class="icon-wrapper icon-wrapper3">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use xlink="" xlink:href="#icon-tiaozhengshixiangshenqingdan"></use>
                                                    </svg>
                                                </div>
                                                <p>客户管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/customer/commucation')">
                                                <div class="icon-wrapper icon-wrapper6">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use xlink:href="#icon-jiekuanchanghuandan"></use>
                                                    </svg>
                                                </div>
                                                <p>商务洽谈</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/product/product_list')">
                                                <div class="icon-wrapper icon-wrapper1">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-FK_Travel_claims"></use>
                                                    </svg>
                                                </div>
                                                <p>商品管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/order/order_list')">
                                                <div class="icon-wrapper icon-wrapper2">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-FK_Expense_reimburse"></use>
                                                    </svg>
                                                </div>
                                                <p>订单管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/finance/analysis/charge_back_analysis')">
                                                <div class="icon-wrapper icon-wrapper5">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-FK_Expense_payment_f"></use>
                                                    </svg>
                                                </div>
                                                <p>退款管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/groupbuy/groupbuy_list')">
                                                <div class="icon-wrapper icon-wrapper8">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-fapiaoguanliandan1"></use>
                                                    </svg>
                                                </div>
                                                <p>团购管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/spread/spread_list')">
                                                <div class="icon-wrapper icon-wrapper9">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-gerenpiliangzhifudan"></use>
                                                    </svg>
                                                </div>
                                                <p>广告管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/spread/coupon_list')">
                                                <div class="icon-wrapper icon-wrapper4">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-FK_Cost_bill_o_ladin"></use>
                                                    </svg>
                                                </div>
                                                <p>优惠券管理</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javaScript:void(0)" @click="linkTo('/finance/dailyincome')">
                                                <div class="icon-wrapper icon-wrapper2">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use  xlink:href="#icon-yutizhifudan"></use>
                                                    </svg>
                                                </div>
                                                <p>日常收支</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="page-panel helping--panel">
                                <h3 class="page-panel-title"> 业务趋势
                                </h3>
                                <div class="page-panel-cont">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="ibox float-e-margins" style="padding:0px;padding-top:20px;">
                                                <div class="ibox-title">
                                                    <h5>订单</h5>
                                                    <div class="pull-right">
                                                        <div class="btn-group">
                                                            <button type="button" @click="changeBtn('day')" class="btn btn-xs btn-white active">
                                                                天
                                                            </button>
                                                            <button type="button" @click="changeBtn('month')" class="btn btn-xs btn-white">月
                                                            </button>
                                                            <!--<button type="button" class="btn btn-xs btn-white">年
                                                            </button>-->
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ibox-content">
                                                    <div class="row">
                                                        <div class="col-sm-9">
                                                            <div class="flot-chart">
                                                                <bar-chart :chart-data="analysis"></bar-chart>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-3">
                                                            <ul class="stat-list">
                                                                <li>
                                                                    <h2 class="no-margins">
                                                                        {{orderTotal}}
                                                                    </h2>
                                                                    <small>订单总数</small>
                                                                    <div class="progress progress-mini">
                                                                        <div style="width: 48%;" class="progress-bar"></div>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <h2 class="no-margins ">{{orderCount}}</h2>
                                                                    <small>最近一个月订单</small>
                                                                    <div class="progress progress-mini">
                                                                        <div style="width: 60%;" class="progress-bar"></div>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <h2 class="no-margins ">{{saleCount}}</h2>
                                                                    <small>最近一个月销售额</small>
                                                                    <div class="progress progress-mini">
                                                                        <div style="width: 22%;" class="progress-bar"></div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BarChart from "@/components/barchart.vue";

    export default {
        name: 'Home',
        components: {
            BarChart
        },
        data() {
            return {
                analysis: {
                    date: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    value: {
                        order: [12, 33, 44, 32, 53, 12, 45, 29, 87, 77, 46, 22],
                        pay: [22, 24, 54, 82, 93, 12, 45, 29, 87, 21, 6, 122]
                    }
                },
                data: {},
                displayDay: false,
                displayMonth: false,
                orderTotal: 0,
                orderCount: 0,
                saleCount: 0,

            }
        },
        mounted() {
            this.changeBtn('day');
        },
        methods: {
            linkTo(toPath) {
                this.$router.push({
                    path: toPath
                });
            },
            async changeBtn(btn) {
                this.analysis = {
                    date: [],
                    value: {
                        order: [],
                        pay: []
                    }
                }
                let res = await this.$api.get('/analysis/homePage', {
                    type: btn
                });
                this.data = res.result
                for (let i = 0; i < this.data.trendList.length; i++) {
                    this.analysis.date.push(this.data.trendList[i].time)
                    this.analysis.value.order.push(this.data.trendList[i].count)
                    this.analysis.value.pay.push(this.data.trendList[i].amount)
                }
                if (btn === 'day') {
                    this.orderTotal = this.data.total_order_count;
                    this.orderCount = this.data.today_order_count;
                    this.saleCount = this.data.today_income;
                }
                if (btn === 'month') {
                    this.orderTotal = this.data.total_order_count;
                    this.orderCount = this.data.current_month_order_count;
                    this.saleCount = this.data.current_month_income;
                }
            }
        },
    }
</script>

<style>
    @import "../../../static/content/static/css/home.css";
</style>
